<template>
	<div class="bg">
		<goback title="AI对话"></goback> <!-- 假设goback是一个返回按钮组件 -->
		<div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
			:style="{'padding-bottom':messages.length-1===index?'2rem':'none'}" v-for="(message, index) in messages"
			:key="index">

			<!--            消息头像-->
			<div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
				<img :src="require(`@/assets/images/${message.img}`)" class="examineeFace_logo_style">
			</div>
			<!--          消息-->
			<div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
				<!--            消息上面-->
				<div :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'"
					v-if="message.sender=='me'">
					我
				</div>
				<div :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'" v-else>
					智慧AI
				</div>
				<div></div>

				<!-- Ai第一次渲染 -->
				<div :class="[message.sender==='me'?'message-me':'message-other',message.isThinking===true?'message-animation':'']"
					v-if="index==1">
					{{ message.content }}
					<div class="question" @click="addmsg1()">
						<img :src="require(`@/assets/icons/手指示.png`)" alt="" class="question-icon">
						如何卖秸秆？
					</div>
					<div class="question" @click="addmsg1()">
						<img :src="require(`@/assets/icons/手指示.png`)" alt="" class="question-icon">
						为什么要卖秸秆？
					</div>
					<div class="question" @click="addmsg1()">
						<img :src="require(`@/assets/icons/手指示.png`)" alt="" class="question-icon">
						企业如何快速入驻？
					</div>
				</div>

				<!--          消息内容-->
				<div :class="[message.sender==='me'?'message-me':'message-other',message.isThinking===true?'message-animation':'']"
					v-else>
					{{ message.content }}
				</div>
			</div>
		</div>
		<div class="msgsend_box">
			<recoderModal @result="getVoice"></recoderModal>
			<input v-model="now_message" class="msgsend_box_input" placeholder="请输入内容..."></input>
			<button @click="addmsg(now_message)">发送</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "aichat",
		data() {
			return {
				now_message: '',
				messages: [{
						sender: 'me',
						content: '你好！',
						isThinking: false,
						img: '头像.jpg'
					},
					{
						sender: 'other',
						content: '你好，我是农事智能答疑助手，您可以点击下方问题快速了解信息哦~！',
						isThinking: false,
						img: 'Ai.png'
					}
				],

			};
		},
		methods: {
			addmsg1(e) {
				// 获取点击的问题内容
				const questionContent = event.target.innerText.trim();
				const newMessage = {
					sender: 'me',
					content: questionContent,
					isThinking: false,
					img: '头像.jpg'
				};
				this.messages.push(newMessage);
				this.now_message = '';

				const thinkingMessage = {
					sender: 'other',
					content: '.',
					isThinking: true,
					img: 'Ai.png'
				};
				this.messages.push(thinkingMessage);
				this.simulateThinking(this.messages.length, questionContent);
			},
			getVoice(e) {
				this.now_message = e;
			},
			addmsg(question) {
				let me = {
					sender: 'me',
					content: question,
					isThinking: false,
					img: '头像.jpg'
				}
				this.messages.push(me);
				this.now_message = '';
				let obj = {
					sender: 'other',
					content: '.',
					isThinking: true,
					img: 'Ai.png'
				}
				this.messages.push(obj);
				this.simulateThinking(this.messages.length, question);
			},

			simulateThinking(index, question) {
				// 模拟思考过程，这里假设思考2秒
				const pid = setInterval(() => {
					if (this.messages[index - 1].content.length <= 5) {
						this.messages[index - 1].content += '.';
					} else {
						this.messages[index - 1].content = '.';
					}
				}, 500);


				this.axios.post(`${this.IP}/contact`, {
					msg: question,
				}).then(res => {
					clearInterval(pid);
					this.messages[index - 1].isThinking = false;
					this.messages[index - 1].content = "";
					this.showMessageContent(res.data.result, index);
				})


			},
			showMessageContent(e, index) {
				// 使用逐字显示动画  
				const content = e;
				let now_char_index = 0;
				const intervalId = setInterval(() => {
					if (now_char_index < content.length) {
						this.messages[index - 1].content += content[now_char_index++];
					} else {
						clearInterval(intervalId);
					}
				}, 100); // 每个字符之间的延迟，可以根据需要调整  
			},
			toggle() {
				this.voice_type = !this.voice_type;
			}

		}
	};
</script>

<style scoped>
	.chat-message-other {
		/*background-color: red;*/
		display: flex;
		padding-left: 1vw;
		padding-top: 1vw;
	}

	.chat-message-me {
		/*background-color: red;*/
		display: flex;
		padding-right: 1vw;
		padding-top: 1vw;
		flex-direction: row-reverse;
		/* 将子div的顺序反转 */
	}

	.message-me-asWhole-headPortrait {
		padding: 3px;
	}

	.message-other-asWhole-headPortrait {
		padding: 3px;
	}

	.message-me-asWhole-right {
		display: flex;
		flex-direction: column;
		/* 设置子元素垂直排列 */
		margin-left: 0.1rem;
	}

	.message-other-asWhole-right {
		display: flex;
		flex-direction: column;
		/* 设置子元素垂直排列 */
		margin-left: 0.1rem;
	}

	.message-me-asWhole-top {
		padding: 1vw;
		/* font-size: 12px; */
		font-family: 微软雅黑;
		padding: 3px;
		color: rgba(134, 144, 156, 1);
		text-align: right;
	}

	.message-other-asWhole-top {
		padding: 3px;
		/* font-size: 12px; */
		font-family: 微软雅黑;
		padding: 3px;
		color: rgba(134, 144, 156, 1);
	}

	.message-me {
		background-color: #fff;
		max-width: 70vw;
		word-wrap: break-word;
		/* 处理英文单词换行 */
		word-break: break-all;
		/* 处理中文换行 */
		display: inline-block;
		/*将div元素转换为行内块元素*/
		width: auto;
		/* 宽度根据文本宽度自动调正*/
		padding: 6px 12px;
		border-radius: 4px;
		font-size: 26px;
	}

	.message-other {
		background-color: #fff;
		max-width: 70vw;
		word-wrap: break-word;
		/* 处理英文单词换行 */
		word-break: break-all;
		/* 处理中文换行 */
		display: inline-block;
		/*将div元素转换为行内块元素*/
		width: auto;
		/* 宽度根据文本宽度自动调正*/
		padding: 6px 12px;
		border-radius: 4px;
		font-size: 26px;
	}


	.examineeFace_logo_style {
		width: 64px;
	}

	.msgsend_box {
		position: fixed;
		bottom: 0px;
		width: 100vw;
		background-color: #ebebeb;
		border-top: 1px solid #efefef;
		padding: 1vw;
		display: flex;
		box-sizing: border-box;
		align-items: center;
	}

	.msgsend_box img {
		width: 64px;
	}

	.msgsend_box_input {
		flex: 1;
		height: 5vw;
		border-radius: 20px;
		padding: 2vw;
		margin: 1vw;
	}

	.msgsend_box_voice {
		flex: 1;
		height: 5vw;
		border-radius: 10px;
		padding: 2vw;
		margin: 1vw;
		background-color: #fff;
		border-radius: 20px;
	}

	.msgsend_box button {
		width: 10vw;
		height: 9vw;
	}

	.question {
		color: red;
		margin: 2vw;
	}

	.question-icon {
		width: 4vw;
		height: 4vw;
	}

	.message-animation {
		/* 添加你想要的样式，例如闪烁效果或简单的文本显示 */
		animation: blinker 1s linear infinite;
	}

	@keyframes blinker {
		50% {
			opacity: 0;
		}
	}
</style>